<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    <kpiHeader></kpiHeader>
    <leftbar></leftbar>
    
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>

    
    <!-- <el-container>
      <el-aside width='200px'>
        <leftbar></leftbar>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-header><kpi-header></kpi-header></el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container> -->
  </div>
</template>

<script>
    import leftbar from './components/base/LeftBar'
    import kpiHeader from './components/base/Header'
    
    export default {
      name: 'App',
      components: { leftbar, kpiHeader }
    }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center;
  color: #2c3e50;
  color: black;
  margin-top: 60px; */
}

.el-header {
  text-align: left;
  line-height: 60px;
}

.content {
  /* background: none repeat scroll 0 0 #F9FAFC; */
  position: absolute;
  left: 220px;
  right: 0;
  top:60px;
  bottom: 0;
  width: auto;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* overflow-y: scroll; */
}
</style>
